<template>
	<view class="container">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{orderMoney}}</text>
		</view>

		<view class="pay-type-list">
			<view class="type-item" @click="changePayType(2)">
				<tui-icon name="wechat" :size="36" color="#36cb59" class="pay-type-icon"></tui-icon>
				<view class="pay-type-con">
					<text class="pay-type-tit">微信支付</text>
					<text>推荐使用微信支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked="payType == 2 ? 'checked' : false" /></radio>
				</label>
			</view>
		</view>

		<text class="to-pay-btn" @click="doOrderPay()">确认支付</text>
	</view>
</template>


<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiToast from "@/components/thorui/tui-toast/tui-toast"
		
	// 用户相关 登录注册什么的
	import wxjs from "../../libs/jweixin-1.5.0.js";
	
	let cf = {
	    h5Appid: 'wx03dcedad7b873692', // h5 appid
		h5RedirectUri: 'http://wz.syrcj.com/wx/we/oauth-callback-api', // h5 redirect_uri
	}
	
	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiButton,
			tuiToast
		},
		data() {
			return {
				payType: 1,			//1微信支付 11余额支付 21消费积分支付
				prepayId: 0,
				orderMoney: 0,
				
				memberId: 0,
				openId: '',
			}
		},
		computed: {
		
		},
		methods: {
			
			//选择支付方式
			changePayType: function(type) {
				this.payType = type;
			},
			
			doOrderPay: function() {
				this.postPayWx();		//微信支付
			},
			
			goMyIndex:function() {
				uni.navigateTo({
					url: '/pages/my/index'
				})
			},
			
			//得到我的预支付订单的详情
			getMyNcpPrepayInfo: function() {
				uni.request({
					url: this.$apiUrl + '/api/my-ncp/prepay-info',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						prepay_id: this.prepayId,
					},
					success: (res) => {
						let resData = res.data['data'];
						let resError = res.data['error'];
						if(resError == 0) {
							this.orderMoney = resData.money;
						}else{
							this.tui.toast("数据请求失败~"); return;
						}
					}
				});
			},

			
			//微信支付
			postPayWx: function() {
				this.wxH5Pay();
			},
			
			//获取用户授权并返回code
			wxH5Oauth2() {
			    location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${cf.h5Appid}&redirect_uri=${cf.h5RedirectUri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
			},
			
			//微信H5支付https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
			wxH5Pay() {
				let that = this;
			
				uni.request({
					url: this.$apiUrl + '/wx/pay/wx-pay-unify-ncp',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
'shopId': uni.getStorageSync('shopId'),
					},
					data: {
						prepay_id: this.prepayId,
						open_id: uni.getStorageSync('openId'),
					},
					success: (res) => {
						let resData = res.data['data'];
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						if(resErr == 0 ) {
							let appId = String(resData.appId);
							let timestamp = Number(resData.timestamp);
							let nonceStr = String(resData.nonceStr);
							let signature = String(resData.paySign);
							
							this.wxh5SetConfig(appId, timestamp, nonceStr, signature);
							
							wxjs.chooseWXPay({
								appId: 'wx03dcedad7b873692',
								timestamp: Number(resData.timestamp),
								nonceStr: String(resData.nonceStr),
								package: String('prepay_id=' + resData.prepayId),
								signType: 'MD5',
								paySign: String(resData.paySign),
								success: function (res) {
									uni.redirectTo({
										url: '/pages/pay/success'
									});
								},
								fail: function (res) {
								//	this.tui.toast('支付失败');
									this.goMyIndex();
								},
								cancel: function (res) {
								//	this.tui.toast('取消了支付');
									this.goMyIndex();
								}
							});
						} else {
							this.tui.toast(resMsg);
						}
					}
				});
			},
			
			//设置配置
			setConfig(config = {}) {
			    cf = com.deepCopy(Object.assign(cf, config));
			},
			
			//获取配置
			getConfig(config = {}) {
			    return cf
			},
			
			
			/**
			 * 微信H5配置
			 * @param {String} appId 公众号的唯一标识
			 * @param {String} timestamp 生成签名的时间戳
			 * @param {String} nonceStr 生成签名的随机串
			 * @param {String} signature 签名
			 * @param {Array} jsApiList 需要使用的JS接口列表
			 */
			wxh5SetConfig(appId, timestamp, nonceStr, signature, jsApiList) {
			    wxjs.config({
			        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			        appId, // 必填，公众号的唯一标识
			        timestamp, // 必填，生成签名的时间戳
					nonceStr, // 必填，生成签名的随机串
					signature,// 必填，签名
			        jsApiList: [
						'updateAppMessageShareData',
						'updateTimelineShareData',
						'onMenuShareTimeline',
						'onMenuShareAppMessage',
						'onMenuShareQQ',
						'onMenuShareWeibo',
						'onMenuShareQZone',
						'startRecord',
						'stopRecord',
						'onVoiceRecordEnd',
						'playVoice',
						'pauseVoice',
						'stopVoice',
						'onVoicePlayEnd',
						'uploadVoice',
						'downloadVoice',
						'chooseImage',
						'previewImage',
						'uploadImage',
						'downloadImage',
						'translateVoice',
						'getNetworkType',
						'openLocation',
						'getLocation',
						'hideOptionMenu',
						'showOptionMenu',
						'hideMenuItems',
						'showMenuItems',
						'hideAllNonBaseMenuItem',
						'showAllNonBaseMenuItem',
						'closeWindow',
						'scanQRCode',
						'chooseWXPay',
						'openProductSpecificView',
						'addCard',
						'chooseCard',
						'openCard'
					]
			    });
			}
		},
		
		onLoad: function(options) {
			//?prepay_id=24
			this.prepayId = options.prepay_id || 0;
		//	this.getMyBaseInfo();		//先得到个人信息
			this.getMyNcpPrepayInfo();
		},
		
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
			uni.stopPullDownRefresh()
		},
		
		onReachBottom: function() {
			return;
		},
		
	}
</script>


<style lang='scss'>

	.price-box {
		background-color: #fff;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #909399;
	}
	
	.price{
		font-size: 50rpx;
		color: #303133;
		margin-top: 12rpx;
	}
	
	.price:before{
		content: '￥';
		font-size: 40rpx;
	}
	
	.pay-type-list {
		margin-top: 20rpx;
		background-color: #fff;
		padding-left: 60rpx;
	}
		
	.type-item{
		height: 120rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60rpx;
		font-size: 30rpx;
		position:relative;
		border-bottom: 2rpx solid #f1f1f1;
	}
	
	.pay-type-icon{
		width: 100rpx;
		font-size: 52rpx;
	}

	.pay-type-tit{
		font-size: 36rpx;
		color: #222;
		margin-bottom: 4rpx;
	}
	
	.pay-type-con{
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 20rpx;
		color: #aaa;
	}

	.to-pay-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 80rpx;
		margin: 80rpx auto 30rpx;
		font-size: 40rpx;
		color: #fff;
		background-color: #FF5A5F;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

</style>